<template >
  <div v-if="this.userinfo != ''">
    <div class="my" :style="{background:'url('+this.userinfo.profile.backgroundUrl+')'}">

      <div class="bg">
        <div class="info">
          <span>
            <img :src="this.imgsrc" alt />
          </span>
          <span class="name">{{this.userinfo.profile.nickname}}</span>
          <span class="level">等级：{{this.userinfo.level}}</span>
        </div>
        <!--  动态信息 -->
        <div class="msg">
          <span @click="history = true">
            <i class="iconfont">&#xe604;</i>
            <p>历史记录</p>
          </span>
          <span @click="toshowsinger = true">
            <i class="iconfont">&#xe63d;</i>
            <p>关注的歌手</p>
          </span>

          <span @click="toshowlike = true">
            <i class="iconfont">&#xe76a;</i>
            <p>猜你喜欢</p>
          </span>
        </div>
        <!-- 用户歌单 -->

        <div class="playlist">
          <div class="menu">
            <div class="menu-left">
              <span :class="{'curspan':this.curspan.spanone}" @click="fontsize('one')">自建歌单</span>
              <span class="cut"></span>
              <span :class="{'curspan':this.curspan.spantwo}" @click="fontsize('two')">收藏歌单</span>
            </div>
            <div class="menu-right"></div>
          </div>
          <!-- 自建所有歌单 -->
          <div class="main" v-if="this.curspan.spanone == true">
            <nut-cell
              :is-link="true"
              :show-icon="true"
              v-for="item in this.listdata"
              :key="item.id"
              @click.native="showPopup(item.id)"
            >
              <div slot="avatar">
                <img :src="item.coverImgUrl" alt />
              </div>
              <span slot="title">{{item.name}}</span>
              <span slot="sub-title">{{item.trackCount}}</span>
            </nut-cell>
          </div>
          <!-- 收藏所有歌单 -->
          <div class="main" v-if="this.curspan.spantwo == true">
            <nut-cell
              :is-link="true"
              :show-icon="true"
              v-for="item in this.listdatafav"
              :key="item.id"
              @click.native="showPopup(item.id)"
            >
              <div slot="avatar">
                <img :src="item.coverImgUrl" alt />
              </div>
              <span slot="title">{{item.name}}</span>
              <span slot="sub-title">{{item.trackCount}}</span>
            </nut-cell>
          </div>
        </div>
      </div>

      <!-- 功能组件 -->
      <topmenu></topmenu>
      <tabbar></tabbar>
      <!-- 收藏歌单显示歌曲组件 -->
      <favlist
        :songsdetail="this.songsdetail"
        :toshowsong="this.toshowsong"
        tname="favlist"
        :closelist="this.closelist"
      ></favlist>
      <!-- 自建歌单歌曲组件 -->

      <mylist
        :songsdetail="this.songsdetail"
        :toshowsong="this.toshowsong"
        tname="mylist"
        :closelist="this.closelist"
      ></mylist>

      <!--  猜你喜欢歌单组件 -->
      <youlike :toshowlike="this.toshowlike" tname="toshowlike" :closelist="closelist"></youlike>
      <!--  关注的歌手组件 -->
      <favsinger :toshowsinger="this.toshowsinger" tname="toshowsinger" :closelist="closelist"></favsinger>
      <!--  历史记录 -->
      <history :history="this.history" tname="history" :closelist="closelist"></history>
      
    </div>
  </div>
</template>
<script>
import {
  url,
  userdetail,
  uesrsubcount,
  playlist,
  playlistdetail
} from "../../api/api";
import topmenu from "../menu/topmenu";
import tabbar from "../tabbar/tabbar";
import mylist from "./mylist";
import favlist from "./favlist";
import youlike from "./youlike";
import favsinger from "./favsinger";
import history from "./history";
export default {
  data() {
    return {
      id: this.$store.state.user.id, //  当前登录的用户id
      userinfo: "", //  当前登录的用户的信息
      imgsrc: "", //  用户头像地址
      curspan: {
        //  自建和收藏歌单的状态
        spanone: true,
        spantwo: false
      },
      listdata: [], //  用户歌单信息
      listdatafav: [], //  收藏的歌单
      toshowsong: false, //  关闭歌曲弹窗
      toshowlike: false, //  猜你喜欢弹窗
      toshowsinger: false, //  关注的歌手弹窗
      history: false, //  听歌历史
      songsdetail: [], //   歌曲详情
      
    };
  },
  components: {
    topmenu,
    tabbar,
    mylist,
    favlist,
    youlike,
    favsinger,
    history
  },
  mounted() {
    this.getuserinfo();
    this.getplaylist();
    this.getplaylistdetail(this.id);
  },
  methods: {
    //  获取歌单歌曲的详情
    getplaylistdetail(id) {
      this.$axios
        .get(url + playlistdetail, {
          params: {
            id: id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
              this.songsdetail = data.data.playlist.tracks;
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    },
    //  打开歌单的回调函数
    showPopup(id) {
      this.toshowsong = true;
      this.getplaylistdetail(id);
    },

    //  关闭歌单的回调函数
    closelist(toshow) {
      if (toshow == "mylist" || toshow == "favlist") {
        this.toshowsong = false;
      } else if (toshow == "toshowlike") {
        this.toshowlike = false;
      } else if (toshow == "toshowsinger") {
        this.toshowsinger = false;
      } else if (toshow == "history") {
        this.history = false;
      }
    },

    //  歌单点击字体变粗
    fontsize(span) {
      for (let i in this.curspan) {
        this.curspan[i] = false;
      }
      if (span == "one") {
        this.curspan.spanone = true;
      } else if (span == "two") {
        this.curspan.spantwo = true;
      }
    },
    //用户歌单
    getplaylist() {
      this.$axios
        .get(url + playlist, {
          params: {
            uid: this.id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
              for (let i in data.data.playlist) {
                if (data.data.playlist[i].creator.signature) {
                  this.listdatafav.push(data.data.playlist[i]);
                } else {
                  this.listdata.push(data.data.playlist[i]);
                }
              }
            }
          },
          err => {
            this.$notify.danger(err);
          }
        );
    },
    //  登录信息
    getuserinfo() {
      this.$axios
        .get(`${url}${userdetail}`, {
          params: {
            uid: this.id
          }
        })
        .then(
          data => {
            if (data.data.code == 200) {
              this.userinfo = data.data;
              this.imgsrc = this.userinfo.profile.avatarUrl;
            }
          },
          err => {
            this.$notify.danger(err.data.msg);
          }
        );
    }
  }
};
</script>
<style scoped>
.my {
  height: 100vh;
  background-image: linear-gradient(#666, #fff);
}

/* 用户的信息 */
.info {
  width: 100%;
  height: 50px;
  color: #fff;
}
.info img {
  width: 50px;
  height: 50px;
  border: 2px solid #fc386b;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 10px 0 20px;
}
.info .level {
  margin-left: 100px;
}

.msg {
  width: 330px;
  height: 100px;
  background: #fff;
  border-radius: 15px;
  margin: 20px auto;
  display: flex;
}
.msg i {
  display: inline-block;
  line-height: 80px;
  text-align: center;
  font-size: 50px;
  color: #fc386b;
  width: 110px;
  height: 80px;
}
.msg p {
  font-size: 14px;
  color: #666;
  text-align: center;
}
.bg {
  width: 375px;
  height: 190px;
  padding-top: 50px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
}

/* 中间的歌曲列表 */

.playlist {
  width: 375px;
  height: 330px;
  background-color: #fff;
  margin-top: 10px;
  padding: 0 20px 0 20px;
  box-sizing: border-box;
  overflow-x: hidden; /*x轴禁止滚动*/
  overflow-y: scroll; /*y轴滚动*/
}

.playlist::-webkit-scrollbar {
  display: none; /*隐藏滚动条*/
}
.playlist .menu span {
  font-size: 16px;
  color: #ccc;
}
.playlist .menu .curspan {
  font-weight: bold;
  color: #333;
}

.playlist .menu .cut {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #000;
  margin: 0 10px 0 10px;
}
.playlist .main {
  width: 335px;
  height: 610px;
}
.playlist .main img {
  width: 45px;
  height: 45px;
  border-radius: 15px;
  margin: 10px 10px 10px 0;
}
/* 歌曲详情 */
.nut-cell-left {
  padding: 10px 0 10px 0;
}
</style>